<template>
	<view class="mainPage addcard" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title"></public-head>
		<view class="list">
			<u-field v-model="name" label="持卡人姓名" :disabled="true">
			</u-field>
			<u-field v-model="backcard" label="银行卡号" placeholder="请填写银行卡号码" type="number" maxlength="19">
				<u-button size="mini" slot="right" type="warning" @click="changeImgs">
					<image style="width: 42rpx;height: 36rpx;" src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/image/camera.png"></image>
				</u-button>
			</u-field>
			<u-field v-model="mobile" label="手机号码" placeholder="请输入银行预留手机号码" type="number" maxlength="11">
			</u-field>
			<u-field v-model="codes" label="验证码" placeholder="请填写验证码" type="number" maxlength="6">
				<u-button size="mini" slot="right" type="warning" @click="getCode">{{codeText}}</u-button>
			</u-field>
			<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
		</view>
		<button class="but select" v-if="name!=''&&backcard!=''&&mobile.length==11&&codes.length==6" @click="submit">提交</button>
		<button class="but" v-else>提交</button>
	</view>
</template>
<script>
var that
import publicHead from "@/components/publicHead/publicHead.vue"
export default {
	components: {
		publicHead
	},
	data() {
		return {
			title: "添加银行卡",
			mobile: '',
			name: '',
			codes: '',
			codeText: '',
			backcard: '',
			card_type: '',
			bank_info: '',
			customStyle: {
				//marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
				color: '#FE7600',
				background: '#FFFFFF',
				fontSize: '28rpx'
			}
		}
	},
	onLoad(e) {
		that = this
		that.name = e.name
	},
	methods: {
		codeChange(text) {
			this.codeText = text;
		},
		getCode() {
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				that.$postAjax1('Doc_Cash_getBindBackCode', {
					mobile: that.mobile
				}, function (data) {
					setTimeout(() => {
						uni.hideLoading();
						// 通知验证码组件内部开始倒计时
						that.$refs.uCode.start();
					}, 1000);
				})
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
		changeImgs() {
			let that = this
			uni.chooseImage({
				count: 1,
				sourceType: ['camera', 'album'],
				success: (res) => {
					console.log(res)
					uni.getImageInfo({
						src: res.tempFilePaths[0],
						success: function (image) {
							let temp = {
								width: image.width,
								height: image.height,
								status: 1
							}
							// 前端拿到临时地址后请求接口
							/*res.tempFilePaths[0]是获取到的第一个数据的blob地址，将他赋值给数据区的imgUrl*/
							that.$util.uploadimgs('Doctor_uploadFile', res.tempFilePaths[0], temp, function (data) {
								console.log(data.data)
								data = JSON.parse(data.data)
								if (data.code == 1) {
									that.xiugai(data.data.url)
								} else {
									uni.showToast({
										title: '上传失败',
										icon: 'none',
										duration: 1500
									});
								}
							})
						}
					});
				}
			})
		},
		xiugai(e) {
			let postData = {
				image_url: e
			}
			that.$postAjax1('Doc_Cash_getBackInfo', postData, function (data) {
				that.backcard = data.data.data.card_no
				that.card_type = data.data.data.card_type
				that.bank_info = data.data.data.bank_info
				uni.showToast({
					title: '上传成功',
					icon: 'none',
					duration: 1500
				});
			})
		},
		submit() {
			if (!(/^1[3456789]\d{9}$/.test(that.mobile))) {
				uni.showToast({
					title: "手机号格式错误！",
					icon: "none"
				})
				return
			}
			let postData = {
				phone: that.mobile,
				card_no: that.backcard,
				bank_info: that.bank_info ? that.bank_info : '',
				card_type: that.card_type ? that.card_type : '',
				code: that.codes
			}
			that.$postAjax1('Doc_Cash_addBank', postData, function (data) {
				uni.showToast({
					title: '添加成功',
					icon: 'none',
					duration: 2000
				});
				uni.navigateBack({
				})
				console.log('成功')
			})
		}
	},
}
</script>
<style lang="scss">
.list {
	.u-border-bottom {
		.u-field-inner {
			.u-label {
				width: 150rpx;
				height: 88rpx;
				.u-label-text {
					width: 150rpx;
				}
			}
		}
	}
}
</style>
<style scoped lang="scss">
.addcard {
	background-color: #f4f4f4;
	min-height: 100vh;
	.list {
		background-color: #ffffff;
	}
	.but {
		background: #c4c4c6;
		border-radius: 46rpx;
		font-size: 32rpx;
		color: #ffffff;
		margin: 80rpx 60rpx;
		line-height: 92rpx;
	}
	.select {
		background: #ff8f2b;
		box-shadow: 0px 6rpx 8rpx 0px rgba(255, 143, 43, 0.2);
	}
}
</style>
